<template>
  <div class="container">
    <button class="btn" :class="btnbg" @click="$emit('click')">
      <slot></slot>
    </button>
    {{type}}
  </div>
</template>

<script>
export default {
  data() {
    console.log(this.type)
    return {
      btnbg: {
        'btn-default': this.type === 'default',
        'btn-success': this.type === 'success',
        'btn-error': this.type === 'error',
      },
    }
  },
  props: ['type'],
  methods: {},
  components: {},
}
</script>

<style scoped>
.btn-success {
  color: #fff;
  background: green;
}
.btn-error {
  background: rgb(236, 33, 15);
}
.btn-default {
  background: #fff;
}
.btn {
  box-shadow: 2px 2px 2px #ccc;
  width: 120px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.btn:hover {
  box-shadow: 2px 2px 4px rgb(86, 84, 84);
  cursor: pointer;
}
.btn:active {
  box-shadow: 2px 2px 4px #fff;
  cursor: pointer;
}
</style>
